<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>PickerColor</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../renderer-process/popup.js"></script>
    <style type="text/css">
    .strip {
        position: relative;
        width: 100%;
    }

    .strip-content {
        z-index: 100;
    }

    .strip-content,
    .strip-bg-content {
        width: 850px;
        position: relative;
        margin: 0 auto;
    }
    /* Demo app */

    #demo-strip {
        padding: 45px 0;
        background: #404040;
        color: #CCC;
    }

    #demo-content h2 {
        margin-bottom: 30px;
        color: #DFDFDF;
    }

    #demo-content a {
        color: #FFF;
    }

    #demo-app {
        position: relative;
        height: 320px;
    }

    #demo-app table {
        width: 100%;
        font-size: 80%;
    }

    #demo-app th {
        font-weight: normal;
        padding: 0 5px;
    }

    #demo-app table input {
        width: 10em;
        color: #FFF;
        border: 1px solid #999;
        background: #262626;
        padding: 2px 5px;
    }

    #demo-app table input:focus {
        border-color: #FFF !important;
        color: #FFF !important;
    }

    #demo-app table input.short {
        width: 3em;
        text-align: center !important;
    }

    #demo-app button {
        width: 180px;
        height: 50px;
        margin: 10px 0;
    }

    #demo-app .panel {
        position: absolute;
        top: 0;
        width: 200px;
    }

    #demo-app .panel .red {
        color: #F99;
    }

    #demo-app .panel .red input {
        border-color: #F99;
        color: #F99;
    }

    #demo-app .panel .grn {
        color: #9F9;
    }

    #demo-app .panel .grn input {
        border-color: #9F9;
        color: #9F9;
    }

    #demo-app .panel .blu {
        color: #9CF;
    }

    #demo-app .panel .blu input {
        border-color: #9CF;
        color: #9CF;
    }

    #demo-app .panel.bgcolor {
        left: 0;
    }

    #demo-app .panel.bgcolor th {
        text-align: right;
    }

    #demo-app .panel.bgcolor td {
        text-align: left;
    }

    #demo-app .panel.bgcolor table input {
        text-align: left;
    }

    #demo-app .panel.fgcolor {
        right: 0;
    }

    #demo-app .panel.fgcolor th {
        text-align: left;
    }

    #demo-app .panel.fgcolor td {
        text-align: right;
    }

    #demo-app .panel.fgcolor table input {
        text-align: right;
    }

    #demo-app #demo-preview {
        margin: 0 auto;
        padding: 60px 0;
        width: 410px;
        border: 4px solid #000;
        text-align: center;
        font-size: 110%;
        font-weight: bold;
        border-radius: 15px;
    }


    #demo-app #demo-links {
        margin: 40px auto;
    }

    #demo-strip,
    #compat-strip {
        -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.85) inset;
        -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.85) inset;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.85) inset;
    }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>PickerColor</legend>
    </fieldset>
    <form class="layui-form " action="">
        <div class="layui-form-item layui-form-text">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <!--============================== BEGIN DEMO APP ==============================-->
                    <div class="strip" id="demo-strip">
                        <div class="strip-content" id="demo-content">
                            <!--============================== BEGIN DEMO APP ==============================-->
                            <div id="demo-app">
                                <script src="../lib/jscolor/jscolor.js"></script>
                                <div id="demo-preview">
                                    This is a demo application
                                    <br />
                                    <big style="font-size: 30px;">&hearts;</big>
                                </div>
                                <div class="panel bgcolor">
                                    <button id="bgcolor-button">Choose background</button>
                                    <table>
                                        <tr>
                                            <th>RGB</th>
                                            <td>
                                                <input id="bgcolor-rgb" onchange="setString('bgcolor', this.value)" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>HEX</th>
                                            <td>
                                                <input id="bgcolor-hex" onchange="setString('bgcolor', this.value)" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>H</th>
                                            <td>
                                                <input id="bgcolor-hue" class="short" onchange="setHSV('bgcolor', this.value, null, null)" /> &deg;</td>
                                        </tr>
                                        <tr>
                                            <th>S</th>
                                            <td>
                                                <input id="bgcolor-sat" class="short" onchange="setHSV('bgcolor', null, this.value, null)" /> %</td>
                                        </tr>
                                        <tr>
                                            <th>V</th>
                                            <td>
                                                <input id="bgcolor-val" class="short" onchange="setHSV('bgcolor', null, null, this.value)" /> %</td>
                                        </tr>
                                        <tr class="red">
                                            <th>R</th>
                                            <td>
                                                <input id="bgcolor-red" class="short" onchange="setRGB('bgcolor', this.value, null, null)" />
                                            </td>
                                        </tr>
                                        <tr class="grn">
                                            <th>G</th>
                                            <td>
                                                <input id="bgcolor-grn" class="short" onchange="setRGB('bgcolor', null, this.value, null)" />
                                            </td>
                                        </tr>
                                        <tr class="blu">
                                            <th>B</th>
                                            <td>
                                                <input id="bgcolor-blu" class="short" onchange="setRGB('bgcolor', null, null, this.value)" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="panel fgcolor">
                                    <button id="fgcolor-button">Choose foreground</button>
                                    <table>
                                        <tr>
                                            <td>
                                                <input id="fgcolor-rgb" onchange="setString('fgcolor', this.value)" />
                                            </td>
                                            <th>RGB</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input id="fgcolor-hex" onchange="setString('fgcolor', this.value)" />
                                            </td>
                                            <th>HEX</th>
                                        </tr>
                                        <tr>
                                            <td>&deg;
                                                <input id="fgcolor-hue" class="short" onchange="setHSV('fgcolor', this.value, null, null)" />
                                            </td>
                                            <th>H</th>
                                        </tr>
                                        <tr>
                                            <td>%
                                                <input id="fgcolor-sat" class="short" onchange="setHSV('fgcolor', null, this.value, null)" />
                                            </td>
                                            <th>S</th>
                                        </tr>
                                        <tr>
                                            <td>%
                                                <input id="fgcolor-val" class="short" onchange="setHSV('fgcolor', null, null, this.value)" />
                                            </td>
                                            <th>V</th>
                                        </tr>
                                        <tr class="red">
                                            <td>
                                                <input id="fgcolor-red" class="short" onchange="setRGB('fgcolor', this.value, null, null)" />
                                            </td>
                                            <th>R</th>
                                        </tr>
                                        <tr class="grn">
                                            <td>
                                                <input id="fgcolor-grn" class="short" onchange="setRGB('fgcolor', null, this.value, null)" />
                                            </td>
                                            <th>G</th>
                                        </tr>
                                        <tr class="blu">
                                            <td>
                                                <input id="fgcolor-blu" class="short" onchange="setRGB('fgcolor', null, null, this.value)" />
                                            </td>
                                            <th>B</th>
                                        </tr>
                                    </table>
                                </div>
                                <script>
                                var options = {
                                    valueElement: null,
                                    width: 300,
                                    height: 120,
                                    sliderSize: 20,
                                    position: 'top',
                                    borderColor: '#CCC',
                                    insetColor: '#CCC',
                                    backgroundColor: '#202020'
                                };

                                var pickers = {};

                                pickers.bgcolor = new jscolor('bgcolor-button', options);
                                pickers.bgcolor.onFineChange = "update('bgcolor')";
                                pickers.bgcolor.fromString('AB2567');

                                pickers.fgcolor = new jscolor('fgcolor-button', options);
                                pickers.fgcolor.onFineChange = "update('fgcolor')";
                                pickers.fgcolor.fromString('FFFFFF');

                                function update(id) {
                                    document.getElementById('demo-preview').style.backgroundColor =
                                        pickers.bgcolor.toHEXString();

                                    document.getElementById('demo-preview').style.color =
                                        document.getElementById('demo-preview').style.borderColor =
                                        pickers.fgcolor.toHEXString();

                                    document.getElementById(id + '-rgb').value = pickers[id].toRGBString();
                                    document.getElementById(id + '-hex').value = pickers[id].toHEXString();

                                    document.getElementById(id + '-hue').value = Math.round(pickers[id].hsv[0]);
                                    document.getElementById(id + '-sat').value = Math.round(pickers[id].hsv[1]);
                                    document.getElementById(id + '-val').value = Math.round(pickers[id].hsv[2]);

                                    document.getElementById(id + '-red').value = Math.round(pickers[id].rgb[0]);
                                    document.getElementById(id + '-grn').value = Math.round(pickers[id].rgb[1]);
                                    document.getElementById(id + '-blu').value = Math.round(pickers[id].rgb[2]);
                                }

                                function setHSV(id, h, s, v) {
                                    pickers[id].fromHSV(h, s, v);
                                    update(id);
                                }

                                function setRGB(id, r, g, b) {
                                    pickers[id].fromRGB(r, g, b);
                                    update(id);
                                }

                                function setString(id, str) {
                                    pickers[id].fromString(str);
                                    update(id);
                                }

                                update('bgcolor');
                                update('fgcolor');
                                </script>
                            </div>
                            <!--============================== END DEMO APP ==============================-->
                        </div>
                    </div>
                    <!--============================== END DEMO APP ==============================-->
                </div>
            </div>
        </div>
    </form>
    <script src="../layui/layui.js"></script>
    <script src="../renderer-process/requestJS.js"></script>
</body>

</html>